<template>
  <div class="video-player-main">
    <VideoPlayer />
    <div class="anime-msg-main">
      <AnimeMsg />
    </div>
  </div>
</template>

<script>
import { provide } from 'vue'
import { useRoute } from 'vue-router'

import VideoPlayer from './components/VideoPlayer.vue'
import AnimeMsg from './components/AnimeMsg.vue'

import { getVideoMixData } from '@/api/index'

export default {
  name: 'AnimeMain',
  components: {
    VideoPlayer,
    AnimeMsg
  },
  setup() {
    const route = useRoute()
    const animeId = route.params

    const { AnimeMsg, VideoSrc } = getVideoMixData(animeId.id)

    provide('AnimeMsg', AnimeMsg)
    provide('VideoSrc', VideoSrc)
  }
}
</script>

<style lang="scss" scoped>
.video-player-main {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 100px;
  padding-top: 20px;
  box-sizing: border-box;
  border-radius: 30px;
  overflow-y: auto;
  background-color: $aside_bg;
  .anime-msg-main {
    margin-bottom: 80px;
    border-radius: 20px;
    width: 100%;
    background-color: $box_bg;
    overflow: hidden;
  }
}
</style>
